<!-- src/views/bondetail.vue -->
<template>
  <div class="bond-detail">
    <!-- 返回按钮 -->
    <div class="back-button" @click="goBack">
      <el-icon><ArrowLeft /></el-icon>
      返回
    </div>

    <!-- 羁绊内容 -->
    <div class="bond-content">
      <div class="bond-main">
        <div class="bond-image">
          <img :src="getImageUrl(bondDetail.img)" :alt="bondDetail.name" v-if="bondDetail.img" @error="handleImageError" />
          <img src="../assets/default_bond.png" :alt="bondDetail.name" v-else />
        </div>

        <div class="bond-info">
          <h1>{{ bondDetail.name }}</h1>
          <div class="description">{{ bondDetail.miaoshu }}</div>
          <div class="effect" v-if="bondDetail.xiaoguo">
            <strong>效果：</strong>
            <p>{{ bondDetail.xiaoguo }}</p>
          </div>
        </div>
      </div>

      <!-- 相关英雄列表 -->
      <div class="related-heros" v-if="relatedHeros.length > 0">
        <h2>相关英雄</h2>
        <div class="heros-list">
          <div
            v-for="(hero, index) in relatedHeros"
            :key="index"
            class="hero-item"
            @click="goToHeroDetail(hero.heroDetail.id)"
          >
            <img
              :src="getImageUrl(hero.heroDetail.img)"
              :alt="hero.heroDetail.name"
              v-if="hero.heroDetail.img"
              class="hero-img"
              @error="handleImageError"
            />
            <img
              src="../assets/default_hero.png"
              :alt="hero.heroDetail.name"
              v-else
              class="hero-img"
            />
            <span class="hero-name">{{ hero.heroDetail.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElLoading, ElMessage } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import request from '@/utils/request'

const route = useRoute()
const router = useRouter()
const bondId = ref(route.query.id)
const bondDetail = ref({})
const relatedHeros = ref([])

// 图片URL处理函数
const getImageUrl = (imgPath) => {
  if (!imgPath) return '';
  // 如果已经是完整URL，直接返回
  if (imgPath.startsWith('http://') || imgPath.startsWith('https://')) {
    return imgPath;
  }
  // 拼接后端服务器地址
  return `http://localhost:8080${imgPath}`;
};

// 图片加载错误处理
const handleImageError = (event) => {
  console.log('图片加载失败:', event.target.src);
  // 可以设置默认图片或其他处理
};

// 获取羁绊详情
const fetchBondDetail = async () => {
  if (!bondId.value) {
    ElMessage.error('无效的羁绊ID')
    router.go(-1)
    return
  }

  const loading = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(0, 0, 0, 0.7)',
  })

  try {
    // 获取羁绊基本信息
    const response = await request({
      url: `/bond/${bondId.value}`,
      method: 'get'
    })
    
    if (response) {
      bondDetail.value = response
    } else {
      ElMessage.error('未找到该羁绊')
      router.go(-1)
      return
    }

    // 获取相关英雄
    try {
      const herosResponse = await request({
        url: `/heros-bond/bond/${bondId.value}`,
        method: 'get'
      })

      const detailedHeros = []
      for (const heroBond of herosResponse) {
        try {
          const heroDetail = await request({
            url: `/heros/${heroBond.heroId}`,
            method: 'get'
          })
          detailedHeros.push({
            relationName: heroBond.name,
            heroDetail: heroDetail
          })
        } catch (err) {
          console.error('获取英雄详情失败:', err)
        }
      }
      relatedHeros.value = detailedHeros
    } catch (error) {
      console.error('获取相关英雄失败:', error)
      relatedHeros.value = []
    }
  } catch (error) {
    console.error('获取羁绊详情失败:', error)
    ElMessage.error('获取羁绊详情失败: ' + (error.message || '未知错误'))
    router.go(-1)
  } finally {
    loading.close()
  }
}

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 跳转到英雄详情
const goToHeroDetail = (id) => {
  router.push({ path: '/herodetail', query: { id: id } }) // 保持与路由配置一致
}

onMounted(() => {
  fetchBondDetail()
})
</script>

<style scoped>
.bond-detail {
  position: relative;
  min-height: 100vh;
  color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bond-detail::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../assets/heard(2).png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0.3;
  z-index: -1;
}
.back-button {
  display: inline-flex;
  align-items: center;
  padding: 10px 15px;
  background: rgba(0, 163, 131, 0.8);
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 20px;
  transition: background 0.3s;
  z-index: 10;
  position: relative;
  align-self: flex-start;
}

.back-button:hover {
  background: rgba(0, 163, 131, 1);
}

.bond-content {
  max-width: 800px;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  padding: 30px;
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bond-main {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #00a383;
  width: 100%;
}

.bond-image {
  display: flex;
  justify-content: center;
}

.bond-image img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  border: 3px solid #00a383;
  border-radius: 10px;
}

.bond-info {
  flex: 1;
  text-align: center;
}

.bond-info h1 {
  font-size: 36px;
  margin-bottom: 20px;
  color: #00a383;
}

.description {
  white-space: pre-line;
  line-height: 1.6;
  margin-bottom: 20px;
  font-size: 18px;
}

.effect {
  margin-top: 20px;
  padding: 15px;
  background: rgba(0, 163, 131, 0.1);
  border-radius: 10px;
  text-align: left;
}

.effect p {
  margin: 10px 0 0 0;
  line-height: 1.6;
}

.related-heros {
  margin-top: 30px;
  width: 100%;
}

.related-heros h2 {
  color: #00a383;
  margin-bottom: 15px;
  text-align: center;
}

.heros-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.hero-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.hero-img {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  border: 2px solid #00a383;
}

.hero-name {
  font-size: 14px;
  color: #ccc;
  text-align: center;
}

@media (max-width: 768px) {
  .bond-main {
    flex-direction: column;
    align-items: center;
  }

  .bond-image img {
    width: 150px;
    height: 150px;
  }

  .bond-info h1 {
    font-size: 28px;
  }
  
  .heros-list {
    gap: 10px;
  }
  
  .hero-img {
    width: 50px;
    height: 50px;
  }
}
</style>
